<#import "spring.ftl" as spring />
<#include "header.ftl"/>
<#include "sidebar.ftl"/>

<html>
  <head>
    <title><@spring.message code="login.title"/></title>    
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Login Page | Mandy Lane - Premium Admin Template</title>
	<link rel="stylesheet" media="screen" href='<@spring.url relativeUrl="/public/css/style.css"/>' />
	<!--[if IE 9]>
	    <link rel="stylesheet" media="screen" href='<@spring.url relativeUrl="/public/css/ie9.css"/>'/>
	<![endif]-->
	
	<!--[if IE 8]>
	    <link rel="stylesheet" media="screen" href='<@spring.url relativeUrl="/public/css/ie8.css"/>'/>
	<![endif]-->
	
	<!--[if IE 7]>
	    <link rel="stylesheet" media="screen" href='<@spring.url relativeUrl="/public/css/ie7.css"/>'/>
	<![endif]-->
	
	<script type="text/javascript" src='<@spring.url relativeUrl="/public/js/plugins/jquery-1.7.min.js"/>'></script>
	<script type="text/javascript" src='<@spring.url relativeUrl="/public/js/plugins/jquery-1.7.min.js"/>'></script>
	<script type="text/javascript" src='<@spring.url relativeUrl="/public/js/plugins/jquery-ui-1.8.16.custom.min.js"/>'></script>
	<script type="text/javascript" src='<@spring.url relativeUrl="/public/js/plugins/jquery.validate.min.js"/>'></script>
	<script type="text/javascript" src='<@spring.url relativeUrl="/public/js/plugins/jquery.colorbox-min.js"/>'></script>
	<!--script type="text/javascript" src='<@spring.url relativeUrl="/public/js/plugins/jquery.flot.min.js"/>'></script-->
	<!--script type="text/javascript" src='<@spring.url relativeUrl="/public/js/custom/dashboard.js"/>'></script-->
	<script type="text/javascript" src='<@spring.url relativeUrl="/public/js/custom/general.js"/>'></script>

	<#-- DWR services -->
	<script type="text/javascript" src='<@spring.url relativeUrl="/dwr/interface/EmployeeService.js"/>'></script>
	<script type="text/javascript" src='<@spring.url relativeUrl="/dwr/engine.js"/>'></script>
	
	<script type="text/javascript">
		var $li = jQuery('.tabmenu').find('li');
		$li.each(function(){
			 $(this).removeClass("current");
		});
		
		var $thisMenu = $li.find('.users').parent();
		$thisMenu.addClass('current');
		
		function gotoPage(page) {
			window.location.href = page;
		}
		
		jQuery(document).ready(function() {
			<#if data.pageIndex == 1>
				jQuery('.pagination > .first').addClass('disabled').attr('onclick','').unbind('click');
				jQuery('.pagination > .prev').addClass('disabled').attr('onclick','').unbind('click');
			<#elseif data.pageIndex == data.totalPage>
				jQuery('.pagination > .next').addClass('disabled').attr('onclick','').unbind('click');
				jQuery('.pagination > .last').addClass('disabled').attr('onclick','').unbind('click');
			</#if>
		});
	</script>
	
  </head>
  
<body>
		<div class="headerspace"></div>
		
		<div class="header">	
			<@search />			
			<@topHeader />
			<!-- logo -->
			<a href=""><img src='<@spring.url relativeUrl="/public/images/logo2.png"/>' alt="Logo" /></a>
			<@buildTabMenu menu = tabMenu />
			<@accountInfor />
		</div><!-- header -->
		
		<div class="sidebar">
			<@buildSideMenu menu = sideMenu />
		</div><!-- leftmenu -->
		
<div class="maincontent">
    	
    <div class="breadcrumbs">
    	<a href="dashboard.html">Admin</a>
        <span>Users list</span>
    </div><!-- breadcrumbs -->
	
    <div class="left">
    	
    	
        <h1 class="pageTitle">Manage Users</h1>
        
        <div class="sTableOptions" style="height:32px">
        	<#if !data.employees?? || data.employees?size == 0>
        		<span>No user found</span>
        		<a href="javascript:void(0)" onclick="deleteEmployee('0001')" class="deleteuser">Delete</a>
        	<#elseif data.totalPage gt 1>
	            <div class="pagination pgright">
	            	<a href="javascript:void(0)" onclick="gotoPage(1)" class="first">&laquo; First</a>
	                <a href="javascript:void(0)" onclick="gotoPage('${data.pageIndex - 1}')" class="prev">&lsaquo; Prev</a>
	                
	                <#if data.totalPage lt 6>
	                	<#assign from = 1 />
	                	<#assign to = data.totalPage />
	                <#else>
	                	<#if data.pageIndex lt 3>
	                		<#assign from = 1 />
	                	<#else>
	                		<#assign from = data.pageIndex - 2 />
	                	</#if>
	                	
	                	<#if from == 1>
	                		<#assign to = 5 />
	                	<#else>
		                	<#if data.pageIndex + 1 lt data.totalPage>
		                		<#assign to = data.pageIndex + 2 />
		                	<#else>
		                		<#assign to = data.totalPage />
		                		<#assign from = to - 4 />
		                	</#if>
	                	</#if>
	            	</#if>
	            	
	            	
	            	<#if from gt 1>
	            		<span>&nbsp;...&nbsp</span>
	            	</#if>
	            	<#list from..to as i>
	            		<a href="javascript:void(0)" <#if i == data.pageIndex>class="current"<#else>onclick="gotoPage(${i})"</#if>>${i}</a>
	            	</#list>
	            	<#if to lt data.totalPage>
	            		<span>&nbsp...&nbsp</span>
	            	</#if>
	                
	                <#--
	            	<a href="" class="current">1</a>
	                <a href="">2</a>
	                <a href="">3</a>
	                <a href="">4</a>
	                <a href="">5</a>
	                <span>...</span>
	                <a href="">18</a>
	                -->
	                
	                <a href="javascript:void(0)" onclick="gotoPage(${data.pageIndex + 1})" class="next">Next &rsaquo;</a>
	                <a href="javascript:void(0)" onclick="gotoPage(${data.totalPage})" class="last">Last &raquo;</a>
	            </div><!--pagination-->
			</#if>
        
        	<!--a class="button delete"><span>Delete</span></a-->
            
        </div><!--sTableOptions-->
        
        <#if data.employees?? && data.employees?size gt 0>
	        <table id="employee_table" cellpadding="0" cellspacing="0" class="sTableHead" width="100%">
	        	<colgroup>
	            	<col class="head0" width="2%" />
	            	<col class="head1" width="5%" />
	                <col class="head0" width="20%" />
	                <col class="head1" width="15%" />
	                <col class="head0" width="15%" />
	                <col class="head1" width="20%" />
	                <col class="head0" width="20%" />
	            </colgroup>
	            <tr>
	            	<td align="center"><input type="checkbox" class="checkall" /></td>
	                <td>Id</td>
	                <td>Name</td>
	                <td>Gender</td>
	                <td>Birthday</td>
	                <td>Email</td>
	                <td align="center">Action</td>
	            </tr>
	        </table>
	        
	        <div class="sTableWrapper">
	            <table cellpadding="0" cellspacing="0" class="sTable" id="userlist" width="100%">
	                <colgroup>
		            	<col class="con0" width="2%" />
		                <col class="con1" width="5%" />
		                <col class="con0" width="20%" />
		                <col class="con1" width="15%" />
		                <col class="con0" width="15%" />
		                <col class="con1" width="20%" />
		                <col class="con1" width="20%" />
	                </colgroup>
	                <#list data.employees as i>
	                <tr id="employee_info_${i.id?string}">
	                    <td align="center"><input type="checkbox" /></td>
	                    <td>
	                    	${i.id}
	                    </td>
	                    <td>
	                    	${i.lastName!""} ${i.middleName!""} ${i.firstName!""}
	                    </td>
	                    <td>
	                    	<#if i.gender??>
						  		<#if i.gender==1>
						  			Male
						  		<#else>
						  			Female
						  		</#if>
						  	<#else>
						  		<font color="red">NA</font>	
							</#if>
						</td>
	                    <td>
	                    	<#if i.birthday??>					  		
						  			${i.birthday}					  		
						  	<#else>
						  		<font color="red">NA</font>	   
						  	</#if>                 	
	                    </td>
	                    <td>
	                   		<#if i.email??>					  		
						  			${i.email}
						  	<#else>
						  		<font color="red">NA</font>
						  	</#if>	   
	                    	
	                    </td>
	                    <td align="center"><a href="<@spring.url relativeUrl="/user/${i.id}"/>">Edit</a></td>
	                </tr>
	                </#list>                
	            </table>
		     </div><!--sTableWrapper-->
		</#if>
    </div><!--left-->
    
    <br clear="all" />
    
</div><!--maincontent-->

<br />
<div class="footer footer_float">
	<div class="footerinner">

    </div><!-- footerinner -->
</div><!-- footer -->

  </body>
</html>
